<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title></title>
</head>
<body>
<!--弹窗：工作时间-->
<div th:fragment="appointimeruleWeek" class="modal inmodal fade" id="appointimeruleWeek_Modal"
     tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span
                        class="sr-only">Close</span></button>
                <h4 class="modal-title">编辑工作时间</h4>
                <small class="font-bold"></small>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <table id="appointimeruleWeek_table" class="table table-striped"></table>
                    </div>
                    <div class="col-md-6">
                        <form role="form" id="appointimeruleWeek_form">
                            <input id="appointimeruleWeek_id" name="id" type="hidden">
                            <input id="appointimeruleWeek_weekDay" name="weekDay" type="hidden">
                            <div class="form-group"><label>星期</label> <input
                                    id="appointimeruleWeek_weekDayName" name="weekDayName"
                                    type="text" class="form-control" readonly></div>
                            <div class="form-group"><label>是否工作</label>
                                <div class="i-checks">
                                    <label> <input type="radio" value="true" name="isWork"> <i></i> 是
                                    </label>&nbsp;&nbsp;
                                    <label> <input type="radio" value="false" name="isWork"> <i></i> 否
                                    </label>
                                </div>
                            </div>
                            <div class="form-group workShow"><label>工作时间
                                <a class="btn btn-white btn-bitbucket text-success" data-toggle="tooltip"
                                   data-placement="top" title="添加工作时间" onclick="appointimeruleWeekObj.addWorkTime()">
                                    <i class="fa fa-plus"></i>
                                </a>
                                </label>
                                <div id="appointimeruleWeek_worktimes"></div>
                            </div>
                            <div class="form-group"><label>备注</label> <textarea
                                    id="appointimeruleWeek_remark" name="remark"
                                    type="text" placeholder="" class="form-control"></textarea>
                            </div>
                            <div class="form-group pull-right">
                                <button class="btn btn-primary m-t-n-xs" type="button"
                                        onclick="appointimeruleWeekObj.submitHandler()">
                                    保存</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>

    <script id="appointimeruleWeek_worktimes_item_tmpl" type="text/x-jquery-tmpl">
        <div class="input-daterange input-group m-t-xs" id="appointimeruleWeek_worktimes_${i}">
            <input type="text" class="form-control-sm form-control datetimepicker-input datetimepicker-time" id="appointimeruleWeek_worktimes_startTime_${i}" name="startTime" data-toggle="datetimepicker" data-target="#appointimeruleWeek_worktimes_startTime_${i}"/>
            <span class="input-group-addon">至</span>
            <input type="text" class="form-control-sm form-control datetimepicker-input datetimepicker-time" id="appointimeruleWeek_worktimes_endTime_${i}" name="endTime" data-toggle="datetimepicker" data-target="#appointimeruleWeek_worktimes_endTime_${i}"/>
            <a onclick="appointimeruleWeekObj.delWorkTime(${i})" class="btn btn-white btn-bitbucket text-success" data-toggle="tooltip" data-placement="top" title="删除工作时间">
                <i class="fa fa-trash"></i>
            </a>
        </div>
    </script>
    <script type="text/javascript">
        $(function () {
            $('.i-checks').iCheck({
                checkboxClass: 'icheckbox_square-green',
                radioClass: 'iradio_square-green',
            });
            $('.i-checks').on('ifChecked', function (event) {
                if (event.target.value == 'true') {
                    $('.workShow').removeClass('d-none');
                } else {
                    $('.workShow').addClass('d-none');
                }
            });
            appointimeruleWeekObj.myValidator = $('#appointimeruleWeek_form').validate({
                rules: appointimeruleWeekObj.dataRule,
                submitHandler: function (form) {
                    appointimeruleWeekObj.dataFormSubmit(form);
                }
            });
            appointimeruleWeekObj.myTable = $('#appointimeruleWeek_table').bootstrapTable({
                queryParamsType: '',
                formatNoMatches: function () {  //没有匹配的结果
                    return '暂无数据';
                },
                queryParams: function (param) {
                    return param;
                },
                onClickRow: function (row, $element, field) {
                    $.myGet({
                        url: `/appoin/atrweek/info/${row.id}`,
                        success: function (data) {
                            if (data && data.code === 0) {
                                appointimeruleWeekObj.fillForm(data.week);
                            } else {
                                toastr.error(data.msg, '操作失败')
                            }
                        }
                    })
                },
                columns: [{
                    title: '#',
                    align: 'center',
                    width: 50,
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                }, {
                    title: '星期',
                    field: 'weekDayName'
                }, {
                    title: '是否工作',
                    field: 'isWork',
                    formatter: function (value, row, index) {
                        return value ? "工作" : "不工作";
                    }
                }],
                responseHandler: function (res) {
                    return res.list;
                }
            });
        })
        var appointimeruleWeekObj = new Object({
            myValidator: undefined,
            myTable: undefined,
            workTimeIndex: undefined,
            dataRule: {
                remark: {
                    maxlength: 400
                }
            },
            // index从1开始
            buildWorkTime: function (index, workTime) {
                if (index) {
                    appointimeruleWeekObj.workTimeIndex = index - 1;
                } else {
                    appointimeruleWeekObj.workTimeIndex = appointimeruleWeekObj.workTimeIndex + 1;
                }
                $('#appointimeruleWeek_worktimes_item_tmpl').tmpl({i: appointimeruleWeekObj.workTimeIndex}).appendTo($('#appointimeruleWeek_worktimes'));
                $('.datetimepicker-time').datetimepicker({
                    format: 'HH:mm'
                });
                $('[data-toggle="tooltip"]').tooltip()
                if (workTime) {
                    $(`#appointimeruleWeek_worktimes_startTime_${appointimeruleWeekObj.workTimeIndex}`).val(workTime.startTime);
                    $(`#appointimeruleWeek_worktimes_endTime_${appointimeruleWeekObj.workTimeIndex}`).val(workTime.endTime);
                }
            },
            addWorkTime: function () {
                appointimeruleWeekObj.buildWorkTime();
            },
            delWorkTime: function (index) {
                $(`#appointimeruleWeek_worktimes_${index}`).remove()
            },
            init: function (id) {
                $('#appointimeruleWeek_Modal').modal('show')
                appointimeruleWeekObj.myTable.bootstrapTable('refresh', {
                    url: `/appoin/atrweek/list/${id}`
                })
            },
            fillForm: function (data = {}) {
                $('#appointimeruleWeek_worktimes').empty();
                $("#appointimeruleWeek_form")[0].reset();
                $("input[type='hidden']").val("");
                for (let i in data) {
                    if ($("#appointimeruleWeek_form").find(`input[name=${i}]`).length > 0 && i != "isWork") {
                        $("#appointimeruleWeek_form").find(`input[name=${i}]`).val(data[i])
                    }
                }
                $(`input:radio[name="isWork"][value=${data.isWork}]`).iCheck('check');
                if (data.weekWorkTimes) {
                    for (let i in data.weekWorkTimes) {
                        appointimeruleWeekObj.buildWorkTime(i + 1, data.weekWorkTimes[i]);
                    }
                }
            },
            submitHandler: function () {
                $("#appointimeruleWeek_form").submit();
            },
            dataFormSubmit: function (form) {
                let formVals = $(form).serializeArray();
                let data = {}
                for (let i = 0; i < formVals.length; i++) {
                    data[formVals[i].name] = formVals[i].value;
                }
                if(data.isWork == 'true') {
                    let startTimes = $('input[name="startTime"]');
                    let endTimes = $('input[name="endTime"]');
                    if (startTimes.length != endTimes.length) {
                        toastr.error("请正确设置工作时间", '操作提示')
                        return;
                    }
                    let weekWorkTimes = [];
                    for (let i = 0; i < startTimes.length; i++) {
                        weekWorkTimes.push({startTime: startTimes[i].value, endTime: endTimes[i].value});
                    }
                    data.weekWorkTimes = weekWorkTimes;
                }
                $.myPost({
                    url: `/appoin/atrweek/update`,
                    dataType: 'json',
                    data: data,
                    success: function (data) {
                        if (data && data.code === 0) {
                            toastr.success(data.msg, '操作提示')
                            appointimeruleWeekObj.myTable.bootstrapTable('refresh');
                            appointimeruleWeekObj.fillForm();
                        } else {
                            toastr.error(data.msg, '操作失败')
                        }
                    }
                })
            }
        })
    </script>
</div>
</body>
</html>